<script setup lang="ts">
import { use, registerMap } from 'echarts/core';
import { MapChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import chinaMap from '@/utils/china';
import { onMounted } from 'vue';
import request from '@/utils/request';
import { getAccidents } from '../../api/index';
import {
    TooltipComponent,
    VisualMapComponent,
} from 'echarts/components';
use([
    CanvasRenderer,
    MapChart,
    TooltipComponent,
    VisualMapComponent
]);
</script>

<template>
    <div>
        <el-card shadow="hover" :body-style="{ height: '750px' }">
            <div class="card-header">
                <p class="card-header-title">事故分布图</p>
            </div>
            <v-chart class="map-chart" :option="mapOptions" />
        </el-card>
    </div>
</template>

<style scoped>
.map-chart {
    width: 100%;
    height: 700px;
}
</style>